<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>盒布局</title>
    <style type="text/css">
        * { padding: 0; margin: 0; }
        .wrap {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            height: 500px;
            /*-webkit-column-count:2;
            -webkit-column-width:200px;
            -webkit-column-gap:150px*/
        }
        .left { background: #528CE0; -webkit-box-ordinal-group: 1; }
        .right { background: #BEE9ED;; -webkit-box-ordinal-group: 3; }
        .main {
            background: #aabbcc; -webkit-box-sizing: border-box; -webkit-box-flex: 1; -webkit-box-ordinal-group: 2;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;
        }

    </style>

</head>
<body>
<div class="wrap">
    <div class="left">
        <h2>左侧栏</h2>

        <p>左侧栏默认宽度为左侧栏默认宽度为左侧栏默认宽度为左侧栏默认宽度为左侧栏默认宽度为左侧栏默认宽度为 250 像素</p>
    </div>
    <div class="right">
        <h2>右侧栏</h2>

        <p>右侧栏默认宽度为 300 像素</p>

    </div>
    <div class="main">
        <h2>主体部分</h2>

        <p>主体部分自适应填充剩余空间</p>
    </div>
</div>

</body>
</html>